/*!
 * Ext JS Library 3.2.2
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function() {

  // NOTE: This is an example showing simple state management. During development,
  // it is generally best to disable state management as dynamically-generated ids
  // can change across page loads, leading to unpredictable results.  The developer
  // should ensure that stable state ids are set for stateful components in real apps.    
  Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

  // sample static data for the store
  var myData = [
      ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
      ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
      ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
      ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
      ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
      ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
      ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
      ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
      ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
      ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
      ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
      ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
      ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
      ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
      ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
      ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
      ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
      ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
      ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
      ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
      ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
      ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
      ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
      ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
      ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
      ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
      ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
      ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
      ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']];

  /**
   * Custom function used for column renderer
   * @param {Object} val
   */
  function change(val) {
    if (val > 0) {
      return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
      return '<span style="color:red;">' + val + '</span>';
    }
    return val;
  }

  /**
   * Custom function used for column renderer
   * @param {Object} val
   */
  function pctChange(val) {
    if (val > 0) {
      return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
      return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
  }

  // create the data store
  var store = new Ext.data.ArrayStore({
        fields : [{
              name : 'company'
            }, {
              name : 'price',
              type : 'float'
            }, {
              name : 'change',
              type : 'float'
            }, {
              name : 'pctChange',
              type : 'float'
            }, {
              name       : 'lastChange',
              type       : 'date',
              dateFormat : 'n/j h:ia'
            }]
      });

  // manually load local data
  store.loadData(myData);

  var linkButton = new Ext.Button({
        text    : '导出到Excel',
        handler : function() {
          var vExportContent = grid.getExcelXml();
          if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2
              || Ext.isSafari3) {
            var fd = Ext.get('grid-name');
            if (!fd) {
              fd = Ext.DomHelper.append(Ext.getBody(), {
                    tag    : 'form',
                    method : 'post',
                    id     : 'grid-name',
                    action : 'excel-template.jsp',
                    target : '_blank',
                    name   : 'grid-name',
                    cls    : 'x-hidden',
                    cn     : [{
                          tag  : 'input',
                          name : 'exportContent',
                          id   : 'exportContent',
                          type : 'hidden'
                        }]
                  }, true);
            }
            fd.child('#exportContent').set({
                  value : vExportContent
                });
            fd.dom.submit();
          } else {
            document.location = 'data:application/vnd.ms-excel;base64,'
                + Base64.encode(vExportContent);
          }
        }
      });

  // create the Grid
  var grid = new Ext.grid.GridPanel({
        store            : store,
        columns          : [{
              id        : 'company',
              header    : 'Company',
              width     : 160,
              sortable  : true,
              dataIndex : 'company'
            }, {
              header    : 'Price',
              width     : 75,
              sortable  : true,
              renderer  : 'usMoney',
              dataIndex : 'price'
            }, {
              header    : 'Change',
              width     : 75,
              sortable  : true,
              renderer  : change,
              dataIndex : 'change'
            }, {
              header    : '% Change',
              width     : 75,
              sortable  : true,
              renderer  : pctChange,
              dataIndex : 'pctChange'
            }, {
              header    : 'Last Updated',
              width     : 85,
              sortable  : true,
              renderer  : Ext.util.Format.dateRenderer('m/d/Y'),
              dataIndex : 'lastChange'
            }],
        stripeRows       : true,
        autoExpandColumn : 'company',
        height           : 350,
        width            : 600,
        title            : 'Array Grid',
        // config options for stateful behavior
        stateful         : true,
        stateId          : 'grid',
        bbar             : new Ext.Toolbar({
              buttons : [linkButton]
            })
      });

  // render the grid to the specified div in the page
  grid.render('grid-example');
});